<template>
    <div>
        <!-- 操作 -->
        <el-button-group>
            <el-button type="warning" size="small" @click="bindAddRoleForm"><el-icon>
                    <Plus />
                </el-icon> 添加</el-button>
            <el-button type="warning" size="small" @click=""><el-icon>
                    <Refresh />
                </el-icon>刷新</el-button>
        </el-button-group>

        <!-- 角色列表 -->
        <el-table :data="roleList" border stripe>
            <el-table-column prop="r_id" label="序号" />
            <el-table-column prop="rolename" label="角色名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column label="编辑">
                <template #default="scope">
                    <EditRoleInput v-model:roleName="scope.row.rolename"></EditRoleInput>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="bindAuthMenu(scope.row.r_id)">权限管理</el-button>
                    <el-button size="small" @click="bindEditRoleForm(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加角色 -->
        <el-dialog :title="formType == 'ADD' ? '添加角色' : '编辑角色'" v-model="disableAddRoleForm" width="40%">
            <AddRoleDialog v-if="disableAddRoleForm" @close="closeRoleAddDialog" :role="role" :formType="formType">
            </AddRoleDialog>
        </el-dialog>

        <el-drawer v-model="disableAuthMenuDrawer" title="权限设置" direction="rtl">
            <AuthMenu v-if="disableAuthMenuDrawer" :roleId="roleId"></AuthMenu>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import EditRoleInput from '@/components/EditRoleInput.vue'
import AddRoleDialog from '@/components/AddRoleDialog.vue'
import AuthMenu from '@/components/AuthMenu.vue'
import { Refresh, Plus } from '@element-plus/icons-vue'
import { useRole, useAuth } from '@/hooks/role'
const {
    roleList,
    disableAddRoleForm,
    bindAddRoleForm,
    bindEditRoleForm,
    closeRoleAddDialog,
    formType,
    role,
} = useRole()


const { disableAuthMenuDrawer, bindAuthMenu, roleId } = useAuth()
</script>

<style scoped>

</style>
